<template>
    <div>
        <el-container id="auth-container">
            <el-main>
                <div id="logo-name" class="animated slideInLeft">
                    {{ $store.state.website_name }}
                </div>
                <div id="login-box">
                    <div class="header">快捷登录</div>
                    <div class="main">
                        <el-form ref="form" :model="form" :rules="rules">
                            <el-form-item prop="username">
                                <el-input
                                        v-model="form.username"
                                        placeholder="用户名"
                                        class="cuborder-radius"
                                        maxlength="11"
                                        @keyup.enter.native="onSubmit('form')"
                                />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                        v-model="form.password"
                                        type="password"
                                        placeholder="密码"
                                        class="cuborder-radius"
                                        @keyup.enter.native="onSubmit('form')"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        type="primary"
                                        class="submit-btn"
                                        :loading="loginLoading"
                                        @click="onSubmit('form')"
                                >立即登录
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <div class="links">
                                    <el-link
                                            type="primary"
                                            :underline="false"
                                            @click="toLink('/forget')"
                                    >找回密码
                                    </el-link>
                                    <el-link
                                            type="primary"
                                            :underline="false"
                                            @click="toLink('/register')"
                                    >还没有账号？立即注册
                                    </el-link>
                                </div>
                            </el-form-item>
                            <p style="margin-top: 50px">
                                <el-divider>
                  <span style="color: rgb(181, 176, 176); font-weight: 200">
                    <i class="el-icon-mobile-phone"/> 预览账号
                  </span>
                                </el-divider>
                            </p>
                            <el-form-item class="preview-account">
                                <p>预览账号:admin / 密码: admin123</p>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="copyright" v-html="$store.state.copyright"></div>
            </el-main>
        </el-container>

        <div class="fly-box">
            <div class="fly bg-fly-circle1"></div>
            <div class="fly bg-fly-circle2"></div>
            <div class="fly bg-fly-circle3"></div>
            <div class="fly bg-fly-circle4"></div>
        </div>
    </div>
</template>
<script>
    // import {setToken} from '@/utils/auth'
    // import {isMobile} from '@/utils/validate'
    import {login} from '@/api/user'
    import { socketConnect} from '../../socket'

    export default {
        name: 'LoginPage',
        data() {
            return {
                loginLoading: false,
                form: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: '登录用户名不能为空!',
                            trigger: 'blur',
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: '登录密码不能为空!',
                            trigger: 'blur',
                        },
                    ],
                },
            }
        },
        methods: {
            onSubmit(formName) {
                if (this.loginLoading) return false

                this.$refs[formName].validate(valid => {
                    if (!valid) return false
                    this.loginLoading = true
                    this.login()
                })
            },
            login() {
                this.$store.dispatch('Login', this.form).then(() => {
                    // socketConnect();
                    this.toLink('/')
                })
                .finally(() => {
                    this.loginLoading = false
                })
            },

            toLink(url) {
                this.$router.push({
                    path: url,
                })
            },
        },
    }
</script>
<style lang="less" scoped>
    @import '~@/assets/css/page/login-auth.less';
</style>
